<template>
	<view class="content">
		<view class="msg-list" @click="toEcharts">
			<view class="msg-item justify-start align-center inline-flex" @click.stop="copyIdFn(detailMsg.deviceAddr)">
				设备地址: {{detailMsg.deviceAddr||'暂无数据'}}
				<image class="copyIcon" src="@/static/app/copy2.png" mode=""></image>
			</view>
			<view class="gray">
				设备编码: {{detailMsg.deviceCode}}
			</view>
			<view class="gray">
				是否保存报警数据: {{detailMsg.alarmRecord === 0 ? '不保存' : '保存'}}
			</view>
			<view class="gray">
				报警开关: {{
			  detailMsg.alarmSwitch === 1 ? '离线报警' : detailMsg.alarmSwitch === 2 ? '超限报警' : detailMsg.alarmSwitch === 4 ? '复归通知' : detailMsg.alarmSwitch === 3 ? '离线报警+超限报警' : detailMsg.alarmSwitch === 5 ? '离线报警+复归通知' : detailMsg.alarmSwitch === 6 ? '超限报警+复归通知' : '离线报警+超限报警+复归通知'
			}}
			</view>
			<view class="gray">
				离线判断间隔(min): {{detailMsg.offlineinterval}}
			</view>
			<view class="gray">
				保存数据间隔(min): {{detailMsg.savedatainterval}}
			</view>
			<view class="gray">
				地址: 庐江县同大镇
			</view>
		</view>
		<view class="now">
			<view class="title justify-between align-center">
				<view class="left justify-start align-center">
					<image class="leftTI" src="../../../static/index/leftTI.png" mode=""></image>
					实时数据
				</view>
				<view class="right">
					<image class="rightJT" src="/static/index/rightJT.png" mode=""></image>
				</view>
			</view>
			<view class="main flex-wrap justify-evenly">
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/online.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备状态</view>
						<view class="con"> {{
                detailMsg.deviceStatus === 'normal' ? '正常' : detailMsg.deviceStatus === 'alarming' ? '报警' : detailMsg.deviceStatus === 'preAlarming' ? '预警' : '离线'
              }}</view>
					</view>
				</view>
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/4g.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">4G 信号强度</view>
						<view class="con"> {{'暂无数据'}}</view>
					</view>
				</view>
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/lal1.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备所处经度</view>
						<view class="con"> {{detailMsg.lat||'暂无数据'}}</view>
					</view>
				</view>
				<view class="item justify-center align-center ">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/lal2.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备所处纬度</view>
						<view class="con"> {{detailMsg.lng||'暂无数据'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMoistureAll
	} from '@/api/index/equipment.js'

	export default {
		data() {
			return {
				deviceAddr: '',
				detailMsg: {}
			}
		},
		onLoad(options) {
			this.deviceAddr = options.deviceAddr;
			this.getMoistureAllFn();
		},
		methods: {
			copyIdFn(id) {
				let that = this;
				uni.setClipboardData({
					data: String(id),
					success() {
						that.$util.msg('复制成功')
					},
					fail() {
						that.$util.msg('复制失败，请重试')
					}
				})
			},
			async getMoistureAllFn() {
				let res = await getMoistureAll();
				this.detailMsg = res.find(item => item.deviceAddr == this.deviceAddr);
			},
			toEcharts() {
				uni.navigateTo({
					url: '/subPages/app/echarts2/index?deviceAddr=' + this.detailMsg.deviceAddr
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: calc(100% - 2rem);
		margin: 0rem auto;
		padding-top: 1.5rem;
		font-size: 1.4rem;
		color: #333;

		.msg-list {
			color: #fff;
			padding: 2rem;
			border-radius: .8rem;
			background: linear-gradient(180deg, #74AA61, #51926D);

			.msg-item {
				padding-bottom: .5rem;

				.copyIcon {
					height: 1.5rem;
					width: 1.5rem;
					margin-left: 1rem;
				}
			}
		}

		.now {
			margin-top: 1.5rem;

			.title {
				.left {
					font-size: 1.5rem;
					font-weight: bold;

					.leftTI {
						width: .5rem;
						height: 1.5rem;
						margin-right: .75rem;
					}
				}

				.right {
					.rightJT {
						width: 1.2rem;
						height: 1.2rem;
					}
				}
			}

			.main {
				.item {
					width: 40%;
					height: 7.5rem;
					border-radius: .8rem;
					box-shadow: 0rem .2rem .4rem .1rem rgba(153, 153, 153, 0.16);
					margin-top: 1rem;

					.logo {
						margin-right: .8rem;

						.logoIcon {
							height: 3.8rem;
							width: 3.8rem;
						}
					}

					.top {
						font-size: 1.4rem;
						font-weight: 600;
					}

					.con {
						font-size: 1.2rem;
					}
				}
			}
		}

	}
</style>